<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>姓名案例method方式实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">

  姓：<input type="text" v-model="firstName"/><br/>
  名：<input type="text" v-model="lastName"/><br/>
  <!--通过插值语法将函数表达式插入到这里-->
  全名：{{fullName}}</br>
</div>
</body>
<script type="text/javascript">
  var i =0;
  var vm = new Vue({
    el:'#root',
    /*data中的数据不管哪个数据发生了变化，Vue的模板就会重新解析一次*/
    data:{
      firstName:'张',
      lastName:'三'
    },
    computed:{
        // 完整写法
       /* fullName:{
            get(){
                //这里的this就是vm对象
                console.log('get第'+i++ +'调用')
                return this.firstName + '-' + this.lastName
            },
            // set 在fullName被修改时调用，传入的value就是修改的值
            set(value){
                var arr =value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }*/
        // 第一种简写  只有获取的时候才能简写
        /*fullName:function (){
            return this.firstName + '-' + this.lastName
        }*/
        // 第二种简写  只有获取的时候才能简写
        fullName (){
            return this.firstName + '-' + this.lastName
        }
    }
  })
</script>
</html>